Unités de mesures absolues et relatives
Pour beaucoup de propriétés CSS, il est possible de définir des tailles. Plusieurs unités de mesures sont à notre disposition mais toutes ne sont pas forcément les plus adaptées à certaines situations.
Il existe 2 catégories d'unités de mesures :
Unités de mesures absolues (il n'y a pas tout)
- px = pixels
- cm = centimètres
- mm = millimètres
Unités de mesures relatives (il n'y a pas tout)
- % = pourcentage
- rem = unité relative à la taille des caractères définie dans la page sur la balise "html" ou sur ":root" (4rem = 4 fois plus gros que la taille des caractères)
- em = unité relative à la taille des caractères de l'élément parent (3em = 3 fois plus gros que la taille des caractères du parents)
- vw = unité relative (en pourcentage) à la largeur de la fenêtre du navigateur. (50vw = la moitié de la largeur de la fenêtre du navigateur)
- vh = unité relative (en pourcentage) à la hauteur de la fenêtre du navigateur. (200vh = le double de la hauteur de la fenêtre du navigateur)
Bonnes pratiques
Pour définir la taille d'un texte, l'unité de mesure recommandée est "rem" : ainsi la taille des textes est directement modifiable par les utilisateurs via leurs préférences enregistrées dans le navigateur.
Pour définir les dimensions des divs de structuration d'une page, il est conseillé d'utiliser l'unité de mesure "%", ainsi les boîtes pourront s'adapter en fonction de la taille de la fenêtre du navigateur. (dans certains cas les valeurs absolues en "px" peuvent être aussi utiles.)
Pour fixer des marges/bordures, il veux mieux utiliser des valeurs absolues comme le "px" afin que ces éléments restent les mêmes tout le temps.
Attention : Une page web n'a pas de hauteur fixe contrairement à sa largeur. On ne peut donc pas fixer une hauteur à un élément en pourcentage, sauf si son parent possède une hauteur fixe absolues (en pixels par exemple).